<template>
    <div>
        <el-container>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="名称">
                    <el-input v-model="formInline.searchProductName" placeholder="请输入你要查找的食品"></el-input>
                </el-form-item>
                <el-form-item label="类别">
                    <template>
                        <el-select v-model="formInline.searchProductType" placeholder="请选择类别">
                            <el-option
                                v-for="item in productCategory"
                                :key="item.id"
                                :label="item.categoryName"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>

            <!-- 全部商品展示 -->
            <el-main>
                <el-row :gutter="20">
                    <el-col :span="6" v-for="product in products" :key="product.productId" style="margin-bottom: 30px">
                        <el-card class="product-card">
                            <el-image :src="product.images[0].imageUrl" class="product-image" alt="ProductImage" @click="$router.push(`productDetail/${product.productId}`)"></el-image>
                            <div class="product-details">
                                <h3 class="product-name">{{ product.name}}</h3>
                                <p class="product-price">{{product.salePrice}}</p>
                                <div class="product-buttons">
                                    <el-button type="primary" @click="buyNow(`${product.productId}`)">立即购买</el-button>
                                    <el-button type="info" @click="addToCart(`${product.productId}`)">加入购物车</el-button>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-main>
            <el-footer>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="current"
                    :page-sizes="ListPage"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </el-footer>
        </el-container>
    </div>
</template>

<script>
export default {
    name: "GoodsAll",
    data() {
        return {
            activeIndex: '1',
            input: '', // 查询框

            vo:{},
            total: 0,
            size:12,
            current:1,
            ListPage:[12,25,40,50],
            products: [],

            formInline: {
                searchProductName: '',
                searchProductType: ''
            },
            // 商品分类列表
            productCategory:[],
        };
    },
    methods: {
        // 加载商品分类
        loadCategories() {
            this.$axios.post(`productCategory/listProductCategory`).then(r =>{
                this.productCategory = r.data
                console.log(444,r.data)
            })
        },
        search() {
            this.$axios.post(`product/query2/${this.current}/${this.size}`,this.vo).then(r =>{
                this.products = r.data.list;
                this.total = r.data.total;
            })
        },
        onSubmit() {
            this.vo = this.formInline;
            this.search();
        },
        goods() {
            this.$router.push('/goodsAll');
        },
        // 分页
        handleSizeChange(val) {
            this.size = val;
            this.search()
        },
        // 分页
        handleCurrentChange(val) {
            this.current = val;
            this.search()
        },
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        // 加入购物车
        addToCart(productId) {
            let user = JSON.parse(sessionStorage.getItem('user'));//获取当前登录用户
            console.log(8888,user.id)
            this.$axios.get(`carts/add/${productId}/${user.id}/${1}`).then(res => {
                console.log(11111, res)
                if (res.data === 'yes') {
                    this.$message({
                        type: 'success',
                        message: '加入购物车成功'
                    });
                } else {
                    this.$message({
                        type: 'error',
                        message: '加入购物车失败'
                    });
                }
            })
        },
        buyNow(product) {
            // 这里可以添加立即购买的逻辑
            console.log(`Buying ${product.name} now`);
        },
    },

    created() {
        this.search()
        this.loadCategories()
    }
};
</script>

<style scoped>
.el-main {
    padding: 20px;
    background-color: #f4f4f4;
}

.el-row {
    justify-content: center;
}

.product-card {
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
}

.product-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.product-details {
    padding: 15px;
}

.product-name {
    margin: 0 0 8px 0;
    font-size: 18px;
    color: #333;
}

.product-price {
    margin: 0 0 15px 0;
    font-size: 16px;
    color: #e60012;
    font-weight: bold;
}

.product-buttons {
    display: flex;
    justify-content: space-between;
    flex: 1;
    margin: 0 5px;
}

</style>